<template>
  <div class="index">
    

    <vue-loadmore :on-loadmore="onLoad" :finished="finished">
      <div class="search">
      <van-search v-model="value" shape="round" @search="onsearch" background="transparent" placeholder="请输入搜索内容" />
    </div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" @change="valueChange" />
      </van-dropdown-menu>
      <div class="goods">
        <section>
          <figure v-for="(item, index) in shpinList" :key="item.RowNumber" @click="tospxq(item.fyclassdataid)">
            <img :src="item.picurl" alt="">
            <div class="goods_info">
              <div class="title">{{ item.spmc }}</div>
              <div class="price">
                <em>￥</em>
                <span>{{ item.spJiage }}</span>
              </div>
            </div>
          </figure>

        </section>

        <van-empty description="暂无数据" v-if="shpinList.length <= 0" />
      </div>
    </vue-loadmore>

    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="gift-o">商户</van-tabbar-item>
      <van-tabbar-item icon="shop-o">商品</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getSpList, postSaveVisit } from "@/api/api.js";
export default {
  name: '',
  data() {
    return {
      value: '',
      active: 2,
      finished: false,
      listLength: 20,
      pageIndex: 1,
      pageSize: 10,
      shpinList: [],
      user: JSON.parse(localStorage.getItem('userlogin')),
      value1: 0,
      option1: [
        { text: '全部', value: 0 },
        { text: '吃', value: 992 },
        { text: '穿', value: 993 },
        { text: '用', value: 994 },
      ],
    };
  },
  created() {
    this.spList()
    this.postSaveVisit()
  },
  mounted() {

  },
  methods: {
    valueChange() {
      console.log('value1==', this.value1);
      this.shpinList = []
      if (this.value1 == 0) {
        this.lx = null
        this.spList()
      } else {
        this.lx = this.value1
        this.spList()
      }
    },
    onChange(index) {
      console.log(index);
      if (index == 0) {
        this.$router.push({
          path: "/home"
        })
      } else if (index == 1) {
        this.$router.push({
          path: "/merchant"
        })
      } else if (index == 3) {
        this.$router.push({
          path: "/my"
        })
      }
    },
    async postSaveVisit() {  //浏览监听
      let res = await postSaveVisit({
        yhid: this.user.id || this.user.yhid,
        lx: 5
      })
    },
    tospxq(id) {
      this.$router.push({ path: "/goodsXq", query: { id: id } });
    },
    onsearch() {
      this.shpinList = []
      this.spList()
    },
    async spList() {
      let res = await getSpList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        mc: this.value,
        lx: this.lx
      });
      if (res.code == 200) {
        this.listLength = res.data.list.length;
        this.shpinList = [...this.shpinList, ...res.data.list];
        console.log(this.shpinList, "pooii");
      }
      console.log("res==", res);
    },
    onLoad(done) {
      console.log(1111);
      this.pageIndex++;
      if (this.listLength >= 10) {
        this.spList()
      } else {
        this.finished = true;
      }

      done();
    },
  },
}
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 100%;
  background: url('../../assets/images/bj.png') no-repeat;
  background-size: 100% 100%;

  .search {
    padding-top: 1.875rem;
  }

  ::v-deep .van-search__content {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #FFFFFF;
  }

  ::v-deep .van-search {
    padding: 0 1.125rem;
  }

  .goods {
    // margin-top: 2.625rem;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1.125rem;

      .title {
        font-size: 1.125rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 1.5625rem;
      }

      .more {
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-size: .75rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          padding-right: .3125rem;
        }

        i {
          width: .4375rem;
          height: .75rem;
          background: url('../../assets/images/arrows_2.png') no-repeat;
          background-size: 100% 100%;
          display: block;
        }
      }
    }

    section {
      margin: 0 auto;
      overflow: hidden;
      column-count: 2;
      column-gap: 0;
      // margin-top: .8125rem;
      padding: 0 .3125rem;
    }

    figure {
      margin: 0 .5625rem .75rem;
      break-inside: avoid;
      background: #fff;
      border-radius: .5rem;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    }

    figure {
      img {
        width: 100%;
        border-radius: .5rem .5rem 0 0;
        display: block;
      }

      .goods_info {
        .title {
          font-size: .875rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #3D3D3D;
          line-height: 1.375rem;
          padding: .5625rem .3125rem 0 .3125rem;
        }

        .price {
          font-size: .75rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #F15712;
          padding: .5625rem 0 .4375rem .3125rem;

          span {
            font-size: 1.125rem;
            display: inline-block;
          }
        }
      }
    }
  }

  ::v-deep .vuejs-loadmore {
    padding-bottom: 3.75rem;
  }

  ::v-deep .van-dropdown-menu {
    .van-dropdown-menu__item {
      -webkit-box-flex: none;
      -webkit-flex: none;
      flex: none;
    }

    .van-dropdown-menu__bar {
      background-color: transparent;
      box-shadow: none;
      padding-left: 10px;
    }

    .van-dropdown-menu__title::after {
      border-color: transparent transparent #999 #999;
    }
  }

  ::v-deep .van-tabbar-item {
    .van-icon-home-o:before {
      content: ''
    }

    .van-icon-friends-o:before {
      content: ''
    }

    .van-icon-gift-o:before {
      content: ''
    }

    .van-icon-shop-o:before {
      content: ''
    }

    .van-icon-home-o {
      width: 1.5rem;
      height: 1.375rem;
      background: url('../../assets/images/home.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-friends-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/my.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-gift-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/2_1.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-shop-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/1_2.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }
  }

  ::v-deep .van-tabbar-item--active {
    .van-icon-home-o:before {
      content: ''
    }

    .van-icon-home-o {
      width: 1.5rem;
      height: 1.375rem;
      background: url('../../assets/images/on_home.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-friends-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/on_my.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-gift-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/2_2.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-shop-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/1_1.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-tabbar-item__text {
      font-size: .625rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #000000;
    }
  }
}
</style>